

class Tabs extends HTMLElement
{
    constructor()
    {
        super();

        this.classList.add("tabs");
        this.style.position = "fixed";
        this.style.left = "0%";

        this.style.width = "100vw";
        this.style.height = "8vh";
        this.style.backgroundColor = "white";

        this.style.display = "flex";
        this.style.flexDirection = "row";
        this.style.justifyContent = "space-around";
        this.style.alignItems = "center";
        this.style.alignContent = "center";


        const div = document.createElement("div");
        div.style.zIndex = "9999";
        div.style.backgroundColor == "#1e9fff";
        div.style.position = "absolute";
        div.style.width = "10%";
        div.style.height = "5%";
        div.style.left = "0%";
        

        const shadow = this.attachShadow({ mode: "closed" });
        const slot = document.createElement("slot");

        shadow.appendChild(div);
        shadow.appendChild(slot);

        

        // TODO! 底部的蓝色条
        this.tabIndex = 0;
        this.addEventListener("click", () => {
            const bars = this.getElementsByTagName("tabs-bar");
            for (let index = 0; index < bars.length; index++) {

            }
        });
    }
}


class TabsTop extends Tabs
{
    constructor()
    {
        super();
        this.classList.add("tabs-top");
        this.style.top = "0%";
        this.style.borderBottom = "solid";
        this.style.borderBottomColor = "#ededed";
    }
}

class TabsBottom extends Tabs
{
    constructor()
    {
        super();
        this.classList.add("tabs-bottom");
        this.style.bottom = "0%";
        this.style.borderTop = "solid";
        this.style.borderTopColor = "#ededed";
    }
}


customElements.define("tabs-top", TabsTop);
customElements.define("tabs-bottom", TabsBottom);


